<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" :checked='store.AllDone?store.todoList.length>0:false'
            @click="changeAllDone($event)" />
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <li class="todo" v-for="(item) in store.visibilityData" :key="item.id" :class="{ 'completed': item.done }"
                @dblclick="editTodo(item.id)">
                <div v-show="!item.isEdit">
                    <input class="toggle" type="checkbox" :checked='item.done' @click="changeStatus(item.id,$event)" />
                    <label>{{item.text}}</label>
                    <button class="destroy" @click="deleteTodo(item.id)"></button>
                </div>
                <input class="edit" type="text" v-show="item.isEdit" :value='item.text'
                    @blur='changeText(item.id,$event)' @keyup.enter='changeText(item.id,$event)' />
            </li>
        </ul>
    </section>
</template>

<script lang="ts" setup>
    import { todoListType, todoType } from '../types/todo'
    import { defineProps } from 'vue';
    import useTodoStore from '../stores/useTodoStore'
    let store = useTodoStore()
    // defineProps({
    //     todoList:{
    //         type:Array,
    //         default:()=>[]
    //     }
    // })
    //  withDefaults(defineProps < { todoList: todoListType } > (), { todoList: () => [] })
    let changeText = (id: string, e: any) => {
        store.changeText(id, e)
    }
    let changeAllDone = (e: any) => {
        store.changeAllDone(e)
    }
    let changeStatus = (id: string, e: any) => {
        store.changeStatus(id, e)
    }
    let deleteTodo = (id: string) => {
        store.deleteTodo(id)
    }
    let editTodo = (id:string)=>{
        store.editTodo(id)
    }
</script>